<template>
  <div class="password-login-container">
    <el-form :model="formData" :rules="rules" ref="loginForm">
      <el-form-item prop="phone">
        <el-input
          v-model="formData.phone"
          type="tel"
          maxlength="11"
          placeholder="请输入手机号"
          :style="inputStyle"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="formData.password"
          type="password"
          placeholder="请输入密码"
          :style="inputStyle"
        />
      </el-form-item>
      <el-form-item>
        <RegisterInfo :loginCommit="formData"></RegisterInfo>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="handleLogin"
          style="
            width: 100%;
            height: 44px;
            background-color: #126983;
            color: #ffffff;
            font-size: 16px;
          "
          >登录</el-button
        >
      </el-form-item>
    </el-form>
    <el-alert
      v-if="showError"
      title="登录失败"
      type="error"
      description="手机号未注册或验证码错误"
      show-icon
      :closable="false"
      class="error-alert"
    />
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { ElMessage } from "element-plus";
import { handlePassWordLogin } from "@/service/login.js";
const showError = ref(false);
const formData = ref({
  phone: "",
  password: "",
});
const emit = defineEmits(["login"]);
const props = defineProps({
  isAgreeddValue: {
    type: Boolean,
    default: false,
  },
});
const rules = {
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号格式", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 4, message: "密码长度不能小于6位", trigger: "blur" },
  ],
};

const loginForm = ref(null);

const validateForm = async () => {
  if (!loginForm.value) return false;

  try {
    await loginForm.value.validate();
    return true;
  } catch (error) {
    return false;
  }
};

const handleLogin = async () => {
  if (!props.isAgreeddValue) {
    ElMessage.warning("请确认已阅读并同意《用户协议》");
    return false;
  }

  const valid = await validateForm();
  if (!valid) {
    ElMessage.error("请正确填写登录信息");
    return;
  }

  // 模拟检查是否注册
  const isRegistered = checkRegistration();
  if (!isRegistered) {
    ElMessage.error("该手机号尚未注册，请先注册");
    return;
  }
};

const checkRegistration = async () => {
  // 这里添加实际的注册检查逻辑
  try {
    let response = await handlePassWordLogin({ ...formData.value, origin: 1 });

    if (response.code === "000000") {
      emit("login", response.data);
    } else {
      ElMessage.error(response.info)
    }
  } catch (error) {
    
  }
  // return false; // 模拟未注册状态
};

const inputStyle = {
  backgroundColor: "#EEEEEE",
  height: "44px",
  "::placeholder": {
    fontSize: "14px",
  },
};
</script>

<style scoped>
.password-login-container :deep(.el-form-item) {
  margin-bottom: 20px;
}

.password-login-container :deep(.el-input__inner::placeholder) {
  font-size: 14px;
}

.password-login-container :deep(.el-input__wrapper) {
  background-color: #eeeeee !important;
}
</style>
